<template>
	<view :style="[{paddingTop:CustomBar+'px'},{paddingBottom: '106rpx'}]">
		<cu-custom bgColor="bg-colorP" :fatherCss="'box-shadow: none'" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">编辑资料</block>
		</cu-custom>
		<view class="head-set">
			<view class="head-set-item" @click="getLogoNew">
				<view class="">
					联盟头像
				</view>
				<view class="fr">
					<image v-if="logo" :src="oss_url+logo" mode=""></image>
					<text class="lg" style="color: #333;font-size: 34rpx;font-weight: bold;" :class="'cuIcon-right'"></text>
				</view>
			</view>
			<view class="head-set-item">
				<view class="">
					联盟名称
				</view>
				<input type="text" v-model="name" placeholder="输入1~10位联盟名称" placeholder-class="place-hl" maxlength="10" />
			</view>
			<view class="head-set-item">
				<view class="">
					联盟简介
				</view>
				<input type="text" v-model="slogan" placeholder="输入1~20位联盟口号/描述" placeholder-class="place-hl" maxlength="20" />
			</view>
		</view>
		<view class="admain-tag">
			<view class="show" v-if="tags.length>0">
				<view class="" v-for="(item,index) in tags" :key="index">
					<text>{{item}}</text>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/delete.png" mode="" @click="del(index)"></image>
				</view>
			</view>
			<view class="add" @click="show" v-if="tags.length<4">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/add2.png" mode=""></image>
				<text>添加标签</text>
			</view>
		</view>
		<view class="truth-temp">
			<view class="title-temp">
				<text></text>
				<text>选择模板</text>
			</view>
			<view class="temp-list">
				<view class="" @click="truthTemp(item.id)" v-for="(item,index) in tempList" :key="index">
					<image :src="item.url" mode=""></image>
					<text>{{item.label}}</text>
					<view class="is_truth use-bbtn" :class="tempId==item.id?'be_truth':''"></view>
				</view>
			</view>
		</view>
		<view class="truth-temp">
			<view class="title-temp">
				<text></text>
				<text>选择背景</text>
			</view>
			<view class="background-list" :style="isReadMore?'height: 375rpx':'height: auto'">
				<view class="" v-for="(item,index) in backgroundList" :key="index" @click="truthBg(item.id)">
					<view class="" :style="'background-image:linear-gradient(-30deg, '+item.start_1+','+ item.end_1+');background-image:-o-linear-gradient(-30deg, '+item.start_1+','+ item.end_1+');background-image:-webkit-gradient(linear, left top, right bottom, from('+item.start_1+'),to('+item.end_1+'))'"></view>
					<view class="">
						{{item.label}}
					</view>
					<view class="is_truth use-bbtn" :class="bgId==item.id?'be_truth':''"></view>
				</view>
			</view>
			<view class="read-more" @click="showMore">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/To-view-more.png" mode=""></image>
				<view class="">
					{{isReadMore?'查看更多':'收起'}}
				</view>
			</view>
		</view>

		<view class="use-botton">
			<!-- <view class="">
				主体预览
			</view> -->
			<view class="" @click="saveInfo">
				立即保存
			</view>
		</view>

		<tui-modal :show="showConversion" @cancel="hide" :custom="true" :maskClosable="false">
			<view class="tui-modal-custom  z_d_y">
				<view class="title">
					添加标签
				</view>
				<input type="text" v-model="addTag" placeholder="请输入不超过4个字的标签" maxlength="4" placeholder-class="place-hl" />
				<view class="btn">
					<text @click="hide">取消</text>
					<text @click="add">确认添加</text>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import tuiModal from "@/components/thorUI/modal"
	export default {
		components: {
			tuiModal
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				truthHeadImg: '',
				name: '',
				slogan: '',
				showConversion: false,
				logo: '',
				tempId: '',
				bgId: '',
				tags: [],
				addTag: '',
				tempList: [],
				backgroundList: [],
				oss_url: '',
				isReadMore: false,
				chainId: ''
			}
		},
		onShow() {
			if (uni.getStorageSync('truthLogo')) {
				this.logo = uni.getStorageSync('truthLogo')
				uni.removeStorageSync('truthLogo')
			}
		},
		onLoad(options) {
			this.chainId = options.chainId
			// 获取资源
			this.getThisData()
			this.getInfo()
		},
		methods: {
			getInfo() {
				var that = this
				this.$request({
					url: '/ChainShop/get_info',
					data: {
						id: that.chainId
					},
					success: res => {
						if (res.data.status == 1) {
							var thisData = res.data.data
							that.bgId = Number(thisData.color)
							that.logo = thisData.image
							that.tempId = thisData.template
							that.name = thisData.name
							that.slogan = thisData.summary
							that.tags = thisData.tags
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			checkData() {
				var that = this
				if (that.logo == '') {
					uni.showModal({
						content: '您还没有设置头像',
						showCancel: true,
						confirmText: '设置头像',
						success: res => {
							if (res.confirm) {
								that.getLogoNew()
							}
						},
						fail: () => {},
						complete: () => {}
					});
					return false
				}

				if (that.name == '') {
					uni.showToast({
						title: '请输入联盟名称',
						icon: 'none'
					})
					return false
				}

				if (that.slogan == '') {
					uni.showToast({
						title: '请输入口号',
						icon: 'none'
					})
					return false
				}

				if (that.tags.length == 0) {
					uni.showToast({
						title: '请添加联盟标签',
						icon: 'none'
					})
					return false
				}

				if (that.tags.length == 0) {
					uni.showToast({
						title: '请至少添加一个标签',
						icon: 'none'
					})
					return false
				}


				if (that.tempId == '') {
					uni.showToast({
						title: '请选择模板',
						icon: 'none'
					})
					return false
				}

				if (that.bgId == '') {
					uni.showToast({
						title: '请选择背景',
						icon: 'none'
					})
					return false
				}

				return true
			},
			// 保存
			saveInfo() {
				var that = this
				if (!this.checkData()) return
				this.$request({
					url: '/ChainShop/set_info',
					data: {
						name: that.name,
						image: that.logo,
						color: that.bgId,
						summary: that.slogan,
						tags: that.tags.join(','),
						template: that.tempId,
						id: that.chainId
					},
					success: res => {
						if (res.data.status == 1) {
							uni.showModal({
								content: '设置联盟主题成功',
								showCancel: false,
								confirmText: '返回主页',
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 1
										})
									}
								}
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getLogoNew() {
				uni.navigateTo({
					url: '/pages/affiliateLogoSet?logo=' + this.logo
				})
			},
			showMore() {
				this.isReadMore = !this.isReadMore
			},
			getThisData() {
				var that = this
				this.$request({
					url: '/ChainShop/get_color_logo',
					success: res => {
						if (res.data.status == 1) {
							that.backgroundList = res.data.data.color
							that.tempList = res.data.data.template
							that.oss_url = res.data.data.oss_url
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 显示弹窗
			show(e) {
				this.addTag = ''
				this.showConversion = true
			},
			// 取消
			hide() {
				this.showConversion = false
			},
			add() {
				var addTag = this.addTag
				var tags = this.tags.filter(item => item == addTag)
				if (tags.length > 0) {
					uni.showToast({
						title: '请不要输入相同标签',
						icon: 'none'
					})
					return
				}
				this.tags.push(addTag)
				this.hide()
			},
			truthBg(id) {
				this.bgId = id
			},
			truthTemp(id) {
				this.tempId = id
			},
			del(index) {
				var that = this
				var tags = this.tags
				uni.showModal({
					title: '确认',
					content: '是否删除' + tags[index] + '?',
					success: function(res) {
						if (res.confirm) {
							tags.splice(index, 1)
							that.tags = [...tags]
						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.head-set {
		width: 100%;
		overflow: hidden;
		background: #fff;
		padding: 0 24rpx;
	}

	.head-set-item {
		width: 100%;
		height: 105rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
		box-sizing: border-box;
	}

	.head-set .head-set-item:last-child {
		border-bottom: 0 !important;
	}

	.head-set-item>view:nth-child(1) {
		width: 150rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-size: 30rpx;
	}

	.head-set-item>input {
		flex: 1;
		color: #333;
		font-size: 30rpx;
	}

	.head-set-item .fr {
		display: flex;
		align-items: center;

	}

	.head-set-item .fr image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		margin-right: 20rpx;
		background-color: #e6e6e6;
	}

	.admain-tag {
		width: 100%;
		margin-top: 20rpx;
		/* height: 184rpx; */
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.admain-tag .show {
		flex: 1;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.admain-tag .show>view {
		width: 164rpx;
		height: 56rpx;
		background-color: #ffffff;
		border-radius: 6rpx;
		border: solid 1rpx #f34930;
		margin-right: 20rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.admain-tag .show>view text {
		color: #f34930;
		text-align: center;
		line-height: 56rpx;
	}

	.admain-tag .show>view image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 100%;
		position: absolute;
		top: -18rpx;
		right: -18rpx;
		background: #fff;
	}

	.admain-tag .add {
		width: 204rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: solid 2rpx #999999;
		border-radius: 6rpx;
	}

	.admain-tag .add image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.admain-tag .add text {
		font-size: 30rpx;
		color: #999999;
	}

	.truth-temp {
		width: 100%;
		margin-top: 20rpx;
		background: #fff;
	}

	.title-temp {
		height: 106rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		width: 100%;

	}

	.title-temp>text:nth-child(1) {
		width: 6rpx;
		height: 36rpx;
		background-color: #f34930;
		margin-right: 20rpx;
	}

	.title-temp>text:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.temp-list {
		padding: 0 24rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
	}

	.temp-list>view {
		width: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 30rpx;
		position: relative;
	}

	.temp-list>view>image {
		width: 220rpx;
		height: 340rpx;
		border-radius: 8rpx;
	}

	.temp-list>view>text {
		font-size: 28rpx;
		color: #333333;
		margin-top: 20rpx;
		display: inline-block;
		text-align: center;
		width: 100%;
	}

	.is_truth {
		width: 36rpx;
		height: 36rpx;
		background-color: #ffffff;
		border: solid 1rpx #efefef;
		border-radius: 100% !important;
	}

	.is_truth.be_truth {
		border: none;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/red-choose.png'), #fff no-repeat;
		background-size: 100% 100%;
	}

	.use-bbtn {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: -22rpx;
		right: -18rpx
	}

	.z_d_y {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.z_d_y .title {
		font-size: 32rpx;
		line-height: 60rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.z_d_y input {
		width: 520rpx;
		height: 88rpx;
		background-color: #efefef;
		border-radius: 8rpx;
		margin: 20rpx 0 30rpx;
		color: #333;
		font-size: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
		/* font-weight: bold; */
	}

	.z_d_y .place-holder {
		color: #999999;
	}

	.z_d_y .btn {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		border-top: solid 1rpx #efefef;
		align-items: center;
		box-sizing: border-box;
	}

	.z_d_y .btn text {
		flex: 1;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 30rpx;
	}

	.z_d_y .btn text:nth-child(2) {
		color: #f34930;
		border-left: solid 1rpx #efefef;
		box-sizing: border-box;
	}

	.background-list {
		width: 100%;
		padding: 30rpx 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.background-list>view {
		width: 220rpx;
		border-radius: 4rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}

	.background-list>view:nth-child(3n) {
		margin-right: 0 !important;
	}

	.background-list>view>view:nth-child(1) {
		width: 220rpx;
		height: 120rpx;
		border-radius: 4rpx;
	}

	.background-list>view>view:nth-child(2) {
		line-height: 58rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-size: 28rpx;
		text-align: left;
		width: 100%;
	}

	.read-more {
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.read-more image {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.read-more view {
		font-size: 24rpx;
		color: #999999;
	}

	.use-botton {
		width: 100%;
		height: 106rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		border-top: solid 1rpx #efefef;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff
	}

	.use-botton>view {
		/* width: 280rpx; */
		flex: 1;
		height: 80rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		text-align: center;


		background-color: #f34930;
		color: #fff;
		font-size: 30rpx;
	}

	/* .use-botton>view:nth-child(1) {
		background-color: #efefef;
		color: #333333;
		font-size: 30rpx;
	}

	.use-botton>view:nth-child(2) {
		background-color: #f34930;
		color: #fff;
		font-size: 30rpx;
	} */
</style>
<style>
	page {
		background: #f5f5f5;
	}

	.place-hl {
		color: #999999;
	}

	.tui-modal-box {
		padding: 20rpx 0 0 !important;
		border-radius: 14rpx !important;
		width: 79% !important;
	}
</style>
